<template>
  <van-dialog
    v-model:show="show"
    title="选择规格"
    show-cancel-button
    @confirm="onConfirm"
  >
    <div class="spec-options">
      <van-checkbox-group v-model="selectedSpecs">
        <van-cell-group>
          <van-cell
            v-for="spec in specs"
            :key="spec.value"
            clickable
          >
            <van-checkbox :name="spec.value">{{ spec.label }}</van-checkbox>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </div>
  </van-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

 defineProps<{
  specs: Array<{ value: string; label: string }>
}>()

const emit = defineEmits(['confirm'])

const show = ref(false)
const selectedSpecs = ref<string[]>([])

const onConfirm = () => {
  emit('confirm', selectedSpecs.value)
}

const open = (defaultSpecs: string[] = []) => {
  selectedSpecs.value = defaultSpecs
  show.value = true
}

defineExpose({
  open
})
</script>

<style scoped>
.spec-options {
  padding: 16px;
}
</style>
